<template>
  <div class="form">
    首页/分类区管理
    <div class="searchContent">
      <div class="title">标题</div>
      <el-input placeholder="请输入标题" v-model="title" clearable> </el-input>
      <div class="button">
        <el-button
          @click="search"
          icon="el-icon-search"
          type="primary"
          size="middle"
          >查询</el-button
        >
      </div>
      <div class="button">
        <el-button icon="el-icon-plus" type="success" size="middle" @click="add"
          >新增</el-button
        >
      </div>
      <div class="button">
        <el-button
          type="danger"
          icon="el-icon-delete"
          @click="dialogVisible = true"
          >批量删除</el-button
        >
      </div>
    </div>
    <!--  选择框 -->
    <el-table
      ref="multipleTable"
      :data="msgList"
      height="315"
      border
      style="width: 1000"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection"  width="50"></el-table-column>
      <el-table-column prop="title" header-row-style='text-align: center;' label="标题" width="150"> </el-table-column>
      <el-table-column prop="img" label="图片" width="100"> 
        <template v-once  slot-scope="scope">
          <img  v-if="scope.row.img" :src="scope.row.img" style="width:70px ;height:70px"/>
          <div v-else></div>
        </template>
      </el-table-column>
      <el-table-column prop="url" label="跳转地址" width="150"></el-table-column>
      <el-table-column prop="description" label="描述" width="200"></el-table-column>
      <el-table-column prop="status" label="是否启用" width="100">
        <template slot-scope="scope">
          <el-switch
            @change="statusChange(scope.row)"
            v-model="scope.row.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="操作" width="200">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-edit"
            @click="edit(scope.row)"
            >编辑</el-button
          >
          <el-popconfirm
            style="margin-left: 10px"
            confirm-button-text="确定"
            cancel-button-text="关闭"
            icon="el-icon-delete"
            icon-color="red"
            title="确定删除该条数据吗"
            @confirm="remove(scope.row._id)"
          >
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              slot="reference"
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top=30px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.pageNum"
        :page-sizes="[5, 10, 300, 400]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <CategoryEdit @load="getList" ref="Editer"></CategoryEdit>
    <!-- 删除提示对话框 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span>确定批量删除数据吗</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="deleteAll">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import CategoryEdit from "./categoryEdit";
export default {
  name: "homeCategory",
  components: { CategoryEdit },
  data() {
    return {
      dialogVisible: false,
      params: {
        title: "",
        pageSize: 5,
        pageNum: 1,
        type: "category",
      },
      //选中数组
      multipleSelection: [],
      total: 1,
      msgList: [],
      title: "",
      value: 0,
    };
  },
  methods: {
    add() {
      this.$refs.Editer.add();
    },
    edit(row) {
      this.$refs.Editer.edit(row);
    },
    //标题查询
    search() {
      this.params.title = this.title;
      this.getList(1);
    },
    //获取列表
    getList(pageNum) {
      this.multipleSelection = [];
      if (pageNum) this.params.pageNum = pageNum;
      this.$http({
        params: this.params,
        url: "/admin/get",
      }).then((res) => {
        if (!res.errorMsg) {
          this.msgList = res.rows;
          this.total = res.total;
          //当前页被删除完了且不是第一页则返回上一页
          if (this.msgList.length == 0 && this.params.pageNum != 1) {
            this.getList(--this.params.pageNum);
          }
        } else {
          console.log(res.errorMsg);
        }
      });
    },
    //改变pageSize
    handleSizeChange(pageSize) {
      this.params.pageSize = pageSize;
      this.getList(1);
    },
    //改变pageNum
    handleCurrentChange(pageNum) {
      this.getList(pageNum);
    },
    //改变选中状态
    handleSelectionChange(val) {
      this.multipleSelection = [];
      val.forEach((element) => {
        this.multipleSelection.push(element._id);
      });
    },
    //状态修改
    statusChange(row) {
      let status = row.status;
      let indexId = row._id;
      this.$http({
        url: "/admin/change",
        method: "PUT",
        data: {
          status,
          indexId,
        },
      }).then((res) => {
        if (!res.errorMsg) {
          this.$message({
            type: "success",
            message: "修改成功",
          });
        } else {
          this.$message({
            type: "error",
            message: res.errorMsg,
          });
        }
      });
    },
    //批量删除数据
    deleteAll() {
      if (this.multipleSelection.length) {
        //批量删除传入数组
        this.remove(this.multipleSelection);
        this.dialogVisible = false;
        //重置数组
        this.multipleSelection = [];
      } else {
        this.dialogVisible = false;
        this.$message({
          type: "error",
          message: "当前未选中数据",
        });
      }
    },
    //删除一条数据
    remove(indexId) {
      this.$http({
        url: "/admin/delete",
        method: "DELETE",
        data: {
          indexId,
          form:'index_region'
        },
      }).then((res) => {
        if (!res.errorMsg) {
          this.getList();
          this.$message({
            type: "success",
            message: "成功删除" + res.affectedRows + "条数据",
          });
        } else {
          this.$message({
            type: "success",
            message: res.errorMsg,
          });
        }
      });
    },
  },
  created() {
    this.getList();
  },
  mounted() {},
};
</script>
  
<style scoped>
.form {
  margin-left: 80px;
  margin-top: 50 px;
}
.searchContent {
  display: flex;
  height: 80px;
  line-height: 80px;
  width: 800px;
}
.title {
  width: 100px;
  text-align: center;
}
.button {
  margin-left: 20px;
  width: 100px;
  height: 30px;
}
</style>